<template>
	<view class="body">
		<xk-header :back="false" title="我的"></xk-header>
		<view class="common-card" :style="{backgroundImage:`url(${mineBg})`}">
			<view class="user-info">
				<image v-if="isLogin" class="header-img" :src="headImg"></image>
				<image v-else class="header-img" :src="(imgUrl+'/wx/no-head.jpeg')"></image>
				<view v-if="isLogin" class="info">
					<view class="name">{{customerName}}</view>
					<view class="mobile"><text style="color: #000;">{{userName}}</text> {{mobile}}</view>
				</view>
				<view v-else class="border-btn" @click="login">登录</view>
			</view>
		</view>
		<view class="menu">
			<view class="menu-item" v-for="(item, index) of newMenuList" :key="index" @click="menuClck(item)">
				<view class="left">
					<image :src="item.fun_icon"></image>
					{{item.fun_name}}
				</view>
				<image class="right" :src="(imgUrl+'/wx/right.png')"></image>
			</view>
		</view>
		<view class="logout" @click="logout()" v-if="isLogin">
			<view>退出登录</view>
		</view>

		<login-popup ref="loginPopup"></login-popup>
		<!-- <tabbar></tabbar> -->
	</view>
</template>

<script>
	// import tabbar from '@/components/tabbar.vue'
	export default {
		// components: {tabbar },
		data() {
			return {
				imgUrl: this.$config.BASE_imgUrl, //获取图片地址
				// isTenant: this.$util.isTenant(), //TENANT租户NOT_YET_TENANT不是租户Notloggedin未登录Admin管理员
				loginInfo: this.$util.getStorage("loginInfo"),
				isLogin: this.$util.isLogin(), //
				userType: this.$util.getStorage("loginInfo").userType, //判断是否小程序或者app
				mineBg: '',
				// mineBg: this.$config.BASE_RES_URL + 'image/mine-bg.png',
				headImg: this.$config.BASE_imgUrl + '/wx/no-head.jpeg',
				userName: '',
				//用一个三元表达式试一下
				customerName: this.$util.getStorage("loginInfo").app !== undefined ? this.$util.getStorage("loginInfo")
					?.app?.name : this.$util.getStorage("loginInfo")?.wx?.name,
				mobile: this.$util.getStorage("loginInfo").app !== undefined ? this.$util.getStorage("loginInfo")?.app
					?.phone : this.$util.getStorage("loginInfo")?.wx?.phoneNo,
				menus: [{
					title: "账号登录",
					icon: this.$config.BASE_imgUrl + "/wx/tuizu.png",
					url: "login",
				}],
				loignMenus: [{
						title: "我的合同",
						icon: this.$config.BASE_imgUrl + "/wx/hetong.png",
						url: "/pagesC/contract/contract-index",
						isTenant: 'TENANT' // 租客展示
					}, {
						title: "我的账单",
						icon: this.$config.BASE_imgUrl + "/wx/tuizu.png",
						url: "/pagesC/bill/index",
						isTenant: 'TENANT' // 租客展示
					}, {
						title: "停车记录",
						icon: this.$config.BASE_imgUrl + "/wx/tuizu.png",
						url: "/pagesB/parking/index",
					},
					{
						title: "公司邀请码",
						icon: this.$config.BASE_imgUrl + "/wx/liulan.png",
						url: "/pagesC/mine/compay-invite-code",
						// ,{
						// 	title: "访客记录",
						// 	icon: this.$config.BASE_imgUrl+"/wx/liulan.png",
						// 	url: "/pagesA/visitor/visitorlog",
						// }
					},
					{
						title: "访客记录",
						icon: this.$config.BASE_imgUrl + "/wx/liulan.png",
						url: "/pagesA/visitor/visitorlog",
					}, {
						title: "园区介绍",
						icon: this.$config.BASE_imgUrl + "/wx/yqjs.png",
						url: "/pagesC/mine/service-introduction",
						isTenant: 'TENANT' // 租客展示
					}, {
						title: "招商联系",
						icon: this.$config.BASE_imgUrl + "/wx/zs.png",
						url: "/pagesC/mine/bussiness-contact",
						isTenant: 'TENANT' // 租客展示
					},
					// {
					// 	title: "编辑个人资料",
					// 	icon: this.$config.BASE_imgUrl+"/wx/bianji.png",
					// 	url: "/pagesC/mine/user-info-edit",
					// },
					{
						title: "修改密码",
						icon: this.$config.BASE_imgUrl + "/wx/bianji.png",
						url: "/pagesC/login/change-password",
						// isTenant: 'TENANT'
					}
				],
				token: this.$util.getStorage("loginInfo").app ? this.$util.getStorage("loginInfo")?.app?.token:this.$util.getStorage("loginInfo")?.wx?.wxToken,
				userId: this.$util.getStorage("loginInfo").app ? this.$util.getStorage("loginInfo")?.app?.id:this.$util.getStorage("loginInfo")?.wx?.id,
				newMenuList: [],
				responseData: {}, // 存储接口返回的数据
				titles: [], // 存储键名，用于作为标题显示wx
			};
		},
		mounted() {
			this.getMenuList()
			if (this.$util.isLogin()) {
				this.menus = this.loignMenus
				console.log('测试this.menus', this.menus)
				this.isLogin = true
				this.userName = this.$util.getStorage("loginInfo").name
			}
		},
		methods: {
			getMenuList() {
				let apiConnect = ''
				if (this.loginInfo.app) {
					apiConnect = 'app'
				} else {
					apiConnect = 'wx'
				}
				// console.log('this.$util.getStorage("loginInfo").token',this.$util.getStorage("loginInfo"));
				this.$util.post({
					url: `${apiConnect}/login/appRole`,
					data: {
						token: this.token || '',
						userID: this.userId || ''
					}
				}).then(res => {
					let list = res.fun.filter(item => {
						return item.pack_name === this.$store.state.tabbarName
					})
					let data = list[0].funs
					this.newMenuList = data
				})
			},
			menuClck(item) {
				// console.log(222222222,item);
				this.$util.setStorage('isPermissions', item.interface_pre_url)
				// if (!item.page_url) {
				// 	this.$util.toast("该功能暂未开放，敬请期待...")
				// 	return
				// }
				// if (item.page_url === "login") {
				// 	this.login()
				// 	return
				// }
				uni.navigateTo({
					url: item.page_url
					// url:'/pagesC/mine/user-info-edit'
				})
			},
			login() {
				this.$refs.loginPopup.show()
			},
			logout() {
				// console.log('userType', this.userType)
				let typeurl = ''
				if (this.loginInfo.app){
					typeurl = 'app'
				}else{
					typeurl = 'wx'
				}
				this.$util.confirm({
					content: "确定要退出当前登录状态？",
					confirmText: "退出"
				}).then((isConfirm) => {
					if (isConfirm) {
						let loginInfo = this.$util.getStorage("loginInfo");
						let id = ''
						if (loginInfo.app) {
							id = loginInfo.app.id
						} else {
							id = loginInfo.wx.id
						}
						if (loginInfo) {
							this.$util.post({
								url: typeurl + "/login/quit",
								data: {
									id: id
								}
							}).then(res => {
								this.$store.commit('changeTabbarIndex', 0)
								this.$store.commit('changeTabbarName', '首页')
								this.$util.removeStorage('isPermissions')
								console.warn("退出登录结果：", res)
							})
						}
						this.$util.logout();
						this.$util.reLaunchHomePage()
					}

				})

			}
		}
	}
</script>

<style lang="scss">
	.border-btn {
		display: flex;
		align-items: center;
		height: 50rpx;
		font-size: 24rpx;
		padding: 0 30rpx;
		border-radius: 50rpx;
		border: 1px solid #FFFFFF;
		color: #000;
		margin: 0;
	}

	.common-card {
		background-size: cover;
		padding: 40rpx 50rpx;

		.user-info {
			display: flex;
			align-items: center;

			.header-img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 120rpx;
				margin-right: 20rpx;
			}

			.info {
				.name {
					font-size: 32rpx;
					line-height: 60rpx;
					font-weight: bolder;
					// color: #ffffff;
				}

				.mobile {
					font-size: 28rpx;
					// color: #ffffff;
				}
			}
		}
	}

	.menu {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx 32rpx;

		.menu-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			padding: 0 20rpx;

			.left {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333333;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 20rpx;
				}
			}

			.right {
				width: 14rpx;
				height: 24rpx;
			}
		}
	}

	.logout {
		display: flex;
		height: 88rpx;
		background-color: #FFFFFF;
		margin: 20rpx 30rpx;
		align-items: center;
		text-align: center;
		justify-content: center;
		color: #333333;
		font-size: 28rpx;
	}
</style>